
'use client'
import { useAccount, useConnect, useDisconnect } from 'wagmi'
import '../globals.css'
import MyHeader from '../comm/head';
import Footer from '../comm/footer';
import React, { useState } from 'react';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
export default function List() {
      const [activeTab, setActiveTab] = useState('全部');
  const [predictions, setPredictions] = useState([
    {
      id: 1,
      title: '2024 年 A 股市场是否会突破 3300 点？',
      startTime: '2024-01-01',
      endTime: '2024-12-31',
      status: '进行中',
      participants: 2834,
      description: '预测 2024 年上证指数是否会突破 3300 点整数关口',
      progress: 75,
      yesPercentage: 65,
      noPercentage: 35
    },
    {
      id: 2,
      title: '特斯拉 2024 年第一季度全球交付量是否突破 50 万辆？',
      startTime: '2024-01-01',
      endTime: '2024-03-31',
      status: '进行中',
      participants: 1563,
      description: '预测特斯拉 2024 Q1 全球交付量能否达到 50 万辆里程碑',
      progress: 45,
      yesPercentage: 48,
      noPercentage: 52
    },
    {
      id: 3,
      title: '2024 年中国 GDP 增速是否能突破 5%？',
      startTime: '2024-01-01',
      endTime: '2024-12-31',
      status: '进行中',
      participants: 3752,
      description: '预测 2024 年中国经济增长是否能维持在 5% 以上',
      progress: 25,
      yesPercentage: 72,
      noPercentage: 28
    },
    {
      id: 4,
      title: '2023 年第四季度比特币是否突破 5 万美元？',
      startTime: '2023-10-01',
      endTime: '2023-12-31',
      status: '已完成',
      participants: 4521,
      description: '预测比特币在 2023 年 Q4 是否能重回 5 万美元',
      progress: 100,
      yesPercentage: 82,
      noPercentage: 18
    },
    {
      id: 5,
      title: '华为 2024 年手机出货量能否突破 4000 万台？',
      startTime: '2024-01-01',
      endTime: '2024-12-31',
      status: '进行中',
      participants: 2145,
      description: '预测华为在 2024 年全年手机出货量能否达到 4000 万台',
      progress: 15,
      yesPercentage: 58,
      noPercentage: 42
    }
  ]);

  const chartRefs = useRef<{ [key: number]: echarts.EChartsType }>({});

  useEffect(() => {
    predictions.forEach((prediction) => {
      const chartDom = document.getElementById(`chart-${prediction.id}`);
      if (chartDom) {
        const chart = echarts.init(chartDom);
        chartRefs.current[prediction.id] = chart;
        
        const option = {
          animation: false,
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              type: 'pie',
              radius: ['60%', '80%'],
              avoidLabelOverlap: false,
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              data: [
                { 
                  value: prediction.yesPercentage, 
                  name: '支持',
                  itemStyle: { color: '#4CAF50' }
                },
                { 
                  value: prediction.noPercentage, 
                  name: '反对',
                  itemStyle: { color: '#FF5252' }
                }
              ]
            }
          ]
        };

        chart.setOption(option);
      }
    });

    return () => {
      Object.values(chartRefs.current).forEach(chart => {
        chart.dispose();
      });
    };
  }, [predictions]);

  const getStatusColor = (status: string) => {
    switch (status) {
      case '进行中':
        return 'bg-blue-500';
      case '已完成':
        return 'bg-green-500';
      case '已失效':
        return 'bg-gray-500';
      default:
        return 'bg-gray-500';
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
        <MyHeader />
      {/* 顶部导航 */}
      <div className="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="h-16 flex items-center justify-between">
            <button className="!rounded-button whitespace-nowrap text-gray-600 hover:text-gray-900">
              <i className="fas fa-arrow-left text-lg"></i>
            </button>
            <h1 className="text-xl font-medium">预测列表</h1>
            <button className="!rounded-button whitespace-nowrap text-gray-600 hover:text-gray-900">
              <i className="fas fa-filter text-lg"></i>
            </button>
          </div>
        </div>
      </div>

      {/* 筛选区域 */}
      <div className="fixed top-16 left-0 right-0 bg-white shadow-sm z-40">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex items-center space-x-6 py-3 overflow-x-auto">
            {['全部', '进行中', '已完成', '已失效'].map((tab) => (
              <button
                key={tab}
                className={`!rounded-button whitespace-nowrap px-4 py-2 text-sm font-medium ${
                  activeTab === tab
                    ? 'bg-blue-500 text-white'
                    : 'text-gray-600 hover:text-gray-900'
                }`}
                onClick={() => setActiveTab(tab)}
              >
                {tab}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* 列表内容 */}
      <div className="max-w-7xl mx-auto px-4 pt-36 pb-24">
        <div className="space-y-4">
          {predictions.map((prediction) => (
            <div
              key={prediction.id}
              className="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow"
            >
              <div className="flex justify-between items-start">
                <div className="flex-1">
                  <h3 className="text-lg font-medium text-gray-900">
                    {prediction.title}
                  </h3>
                  <p className="mt-1 text-sm text-gray-500">
                    {prediction.startTime} 至 {prediction.endTime}
                  </p>
                  <div className="mt-2 flex items-center space-x-4">
                    <span
                      className={`${getStatusColor(
                        prediction.status
                      )} text-white text-xs px-2 py-1 rounded-full`}
                    >
                      {prediction.status}
                    </span>
                    <span className="text-sm text-gray-500">
                      <i className="fas fa-users mr-1"></i>
                      {prediction.participants} 人参与
                    </span>
                  </div>
                  <p className="mt-3 text-sm text-gray-600">
                    {prediction.description}
                  </p>
                  <div className="mt-4 w-full bg-gray-200 rounded-full h-2">
                    <div
                      className="bg-blue-500 h-2 rounded-full"
                      style={{ width: `${prediction.progress}%` }}
                    ></div>
                  </div>
                </div>
                <div className="ml-6 w-24 h-24">
                  <div
                    id={`chart-${prediction.id}`}
                    className="w-full h-full"
                  ></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 底部操作栏 */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div className="max-w-7xl mx-auto px-4">
          <div className="h-16 flex items-center justify-center">
            <button className="!rounded-button whitespace-nowrap bg-blue-500 text-white px-8 py-2 hover:bg-blue-600 transition-colors">
              发起预测
            </button>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}